<template>
    <span class="tnxel-icon" :style="style" v-if="value?.length === 1">{{ value }}</span>
    <el-icon :class="className" :color="color" :style="style" v-else>
        <Loading v-if="value === 'Loading'"/>
        <ArrowDown v-else-if="value === 'ArrowDown'"/>
        <ArrowLeft v-else-if="value === 'ArrowLeft'"/>
        <ArrowLeftBold v-else-if="value === 'ArrowLeftBold'"/>
        <ArrowRight v-else-if="value === 'ArrowRight'"/>
        <ArrowRightBold v-else-if="value === 'ArrowRightBold'"/>
        <Bottom v-else-if="value === 'Bottom'"/>
        <CaretBottom v-else-if="value === 'CaretBottom'"/>
        <CaretTop v-else-if="value === 'CaretTop'"/>
        <Check v-else-if="value === 'Check'"/>
        <CircleCheck v-else-if="value === 'CircleCheck'"/>
        <CircleCheckFilled v-else-if="value === 'CircleCheckFilled'"/>
        <CircleClose v-else-if="value === 'CircleClose'"/>
        <CircleCloseFilled v-else-if="value === 'CircleCloseFilled'"/>
        <CirclePlus v-else-if="value === 'CirclePlus'"/>
        <CirclePlusFilled v-else-if="value === 'CirclePlusFilled'"/>
        <Close v-else-if="value === 'Close'"/>
        <CloseBold v-else-if="value === 'CloseBold'"/>
        <CopyDocument v-else-if="value === 'CopyDocument'"/>
        <DArrowRight v-else-if="value === 'DArrowRight'"/>
        <Delete v-else-if="value === 'Delete'"/>
        <DeleteFilled v-else-if="value === 'DeleteFilled'"/>
        <Document v-else-if="value === 'Document'"/>
        <DocumentCopy v-else-if="value === 'DocumentCopy'"/>
        <Download v-else-if="value === 'Download'"/>
        <Edit v-else-if="value === 'Edit'"/>
        <EditPen v-else-if="value === 'EditPen'"/>
        <Files v-else-if="value === 'Files'"/>
        <Finished v-else-if="value === 'Finished'"/>
        <Folder v-else-if="value === 'Folder'"/>
        <FolderOpened v-else-if="value === 'FolderOpened'"/>
        <Grid v-else-if="value === 'Grid'"/>
        <Histogram v-else-if="value === 'Histogram'"/>
        <HomeFilled v-else-if="value === 'HomeFilled'"/>
        <InfoFilled v-else-if="value === 'InfoFilled'"/>
        <Key v-else-if="value === 'Key'"/>
        <List v-else-if="value === 'List'"/>
        <Location v-else-if="value === 'Location'"/>
        <LocationFilled v-else-if="value === 'LocationFilled'"/>
        <Management v-else-if="value === 'Management'"/>
        <Memo v-else-if="value === 'Memo'"/>
        <Minus v-else-if="value === 'Minus'"/>
        <More v-else-if="value === 'More'"/>
        <MoreFilled v-else-if="value === 'MoreFilled'"/>
        <Notebook v-else-if="value === 'Notebook'"/>
        <OfficeBuilding v-else-if="value === 'OfficeBuilding'"/>
        <Operation v-else-if="value === 'Operation'"/>
        <Picture v-else-if="value === 'Picture'"/>
        <PictureFilled v-else-if="value === 'PictureFilled'"/>
        <Plus v-else-if="value === 'Plus'"/>
        <Pointer v-else-if="value === 'Pointer'"/>
        <QuestionFilled v-else-if="value === 'QuestionFilled'"/>
        <Rank v-else-if="value === 'Rank'"/>
        <Reading v-else-if="value === 'Reading'"/>
        <Refresh v-else-if="value === 'Refresh'"/>
        <Remove v-else-if="value === 'Remove'"/>
        <RemoveFilled v-else-if="value === 'RemoveFilled'"/>
        <Right v-else-if="value === 'Right'"/>
        <Search v-else-if="value === 'Search'"/>
        <Select v-else-if="value === 'Select'"/>
        <SemiSelect v-else-if="value === 'SemiSelect'"/>
        <Setting v-else-if="value === 'Setting'"/>
        <SetUp v-else-if="value === 'SetUp'"/>
        <Sort v-else-if="value === 'Sort'"/>
        <SuccessFilled v-else-if="value === 'SuccessFilled'"/>
        <Switch v-else-if="value === 'Switch'"/>
        <Tools v-else-if="value === 'Tools'"/>
        <Top v-else-if="value === 'Top'"/>
        <User v-else-if="value === 'User'"/>
        <UserFilled v-else-if="value === 'UserFilled'"/>
        <View v-else-if="value === 'View'"/>
        <Warning v-else-if="value === 'Warning'"/>
        <WarningFilled v-else-if="value === 'WarningFilled'"/>
        <ZoomIn v-else-if="value === 'ZoomIn'"/>
    </el-icon>
</template>

<script>
import {
    ArrowDown,
    ArrowLeft,
    ArrowLeftBold,
    ArrowRight,
    ArrowRightBold,
    Bottom,
    CaretBottom,
    CaretTop,
    Check,
    CircleCheck,
    CircleCheckFilled,
    CircleClose,
    CircleCloseFilled,
    CirclePlus,
    CirclePlusFilled,
    Close,
    CloseBold,
    CopyDocument,
    DArrowRight,
    Delete,
    DeleteFilled,
    Document,
    DocumentCopy,
    Download,
    Edit,
    EditPen,
    Files,
    Finished,
    Folder,
    FolderOpened,
    Grid,
    Histogram,
    HomeFilled,
    InfoFilled,
    Key,
    List,
    Location,
    LocationFilled,
    Loading,
    Management,
    Memo,
    Minus,
    More,
    MoreFilled,
    Notebook,
    OfficeBuilding,
    Operation,
    Picture,
    PictureFilled,
    Plus,
    Pointer,
    QuestionFilled,
    Rank,
    Reading,
    Refresh,
    Remove,
    RemoveFilled,
    Right,
    Search,
    Select,
    SemiSelect,
    Setting,
    SetUp,
    Sort,
    SuccessFilled,
    Switch,
    Tools,
    Top,
    User,
    UserFilled,
    View,
    Warning,
    WarningFilled,
    ZoomIn,
} from '@element-plus/icons-vue';

const components = {
    ArrowDown,
    ArrowLeft,
    ArrowLeftBold,
    ArrowRight,
    ArrowRightBold,
    Bottom,
    CaretBottom,
    CaretTop,
    Check,
    CircleCheck,
    CircleCheckFilled,
    CircleClose,
    CircleCloseFilled,
    CirclePlus,
    CirclePlusFilled,
    Close,
    CloseBold,
    CopyDocument,
    DArrowRight,
    Delete,
    DeleteFilled,
    Document,
    DocumentCopy,
    Download,
    Edit,
    EditPen,
    Files,
    Finished,
    Folder,
    FolderOpened,
    Grid,
    Histogram,
    HomeFilled,
    InfoFilled,
    Key,
    List,
    Location,
    LocationFilled,
    Management,
    Memo,
    Minus,
    More,
    MoreFilled,
    Notebook,
    Loading,
    OfficeBuilding,
    Operation,
    Picture,
    PictureFilled,
    Plus,
    Pointer,
    QuestionFilled,
    Rank,
    Reading,
    Refresh,
    Remove,
    RemoveFilled,
    Right,
    Search,
    Select,
    SemiSelect,
    Setting,
    SetUp,
    Sort,
    SuccessFilled,
    Switch,
    Tools,
    Top,
    User,
    UserFilled,
    View,
    Warning,
    WarningFilled,
    ZoomIn,
};

export default {
    name: 'TnxelIcon',
    components: components,
    props: {
        value: String,
        color: {},
        size: Number,
        width: [Number, String],
        height: [Number, String],
    },
    computed: {
        isUrlType() {
            return this.value && (
                this.value.startsWith('https://') || this.value.startsWith('http://')
                || this.value.startsWith('../') || this.value.startsWith('./') || this.value.startsWith('/')
            );
        },
        className() {
            if (this.isUrlType) {
                return undefined;
            }
            if (this.value && components[this.value]) {
                let className = 'tnxel-icon-' + this.value;
                if (this.value === 'Loading') {
                    className += ' is-loading';
                }
                return className;
            } else if (this.value === 'loading') {
                return 'tnxel-icon-' + this.value + ' el-icon-loading';
            } else {
                return this.value;
            }
        },
        style() {
            let style = {};
            if (this.size) {
                style['font-size'] = this.size + 'px';
            }
            let width = this.width || this.size;
            if (width) {
                style.width = width;
                if (typeof style.width === 'number') {
                    style.width += 'px';
                }
            }
            let height = this.height || this.size;
            if (height) {
                style.height = height;
                if (typeof style.height === 'number') {
                    style.height += 'px';
                }
            }
            if (this.isUrlType) {
                style['background-repeat'] = 'no-repeat';
                style['background-image'] = 'url(' + this.value + ')';
                style['background-size'] = style.width + ' ' + style.height;
            }
            return style;
        }
    },
}
</script>

<style>
span.tnxel-icon {
    display: inline-block;
    border: 1px solid currentColor;
    border-radius: 3px;
    line-height: 1;
    font-size: 80%;
    font-weight: bold;
    width: 12px;
    height: 12px;
    text-align: center;
}
</style>
